<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="include :: head">page head</head>

<body class="text-center">

<div class="container d-flex h-100 p-3 mx-auto flex-column">
	<div th:replace="include :: top">header goes here.</div>
	
	<main role="main" class="inner cover" id="app">
		<div class="container wallet-info p-4">
			<div class="alert alert-danger text-left" role="alert">
				注意：同一个钱包地址，每分钟只能获取一次测试代币，每次 1000 FIL。
			</div>
			
			<div class="alert alert-success text-left" role="alert" v-show="show">
				{{message}}
			</div>
			
			<form class="text-left">
				<div class="form-group">
					<input type="text" name="address" v-model="address" class="form-control"
					       placeholder="钱包地址">
				</div>
				
				<button type="button" v-on:click="submit" style="padding: 0.55rem 1.25rem; letter-spacing:20px;"
				        class="mt-4 btn btn-primary btn-block">提交</button>
			</form>
		</div>
	
	</main>
	
	<div th:replace="include :: footer">footer goes here.</div>
</div>

<script>
	new Vue({
		el: "#app",
		data: {
			message: "",
			show: false,
			address: ""
		},
		methods: {
			submit: function () {
				var that = this;
				if (this.address.trim() == '') {
					return messageError("请输入钱包地址.");
				}
				var loading = messageLoading();
				setTimeout(function () {
					httpPost("/api/filecoin/faucet", {
						address : that.address
					}, function (res) {
						that.message = res.message;
						that.show = true;
						loading.hide();
					}, function (message) {
						messageError(message);
						loading.hide();
					});
				}, 500);
				
			}
		}
	});
</script>
</body>
</html>